﻿$(function () {
  
  httpRequest({
    method:"get",
    url: url_base +"/analysis/getBed",  //请求的url地址
    // data:{
    //   param1:''
    // }
  },function(res){
    res = getWantObject(res)
    if(res.success)
      newecharts_1(res.result);
    else
      alert(res.message);
  },function(){
    console.log("请求失败");
  });
  

  let data1 = [];
  data1[0] = [];
  data1[1] = [];
  data1[2] = [];
  let data2 = [];
  data2[0] = [];
  data2[1] = [];
  data2[2] = [];
  let data4 = [];
  data4[0] = [];
  data4[1] = [];
  data4[2] = [];
  let data5 = [];
  data5[0] = [];

  // newecharts_1();
  newecharts_2();
  echarts_4();
  echarts_31();
  echarts_32();
  echarts_33();
  echarts_5();
  echarts_6();


  function newecharts_1(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'));

    let newData = {
      cityList: ['广州', '长沙', '怀化', '惠州', '海口'],
      hasLive: [13646, 12834, 9864, 6260, 3586],
      emptyLive: [230, 480, 320, 330, 200],
      waitLive: [695, 520, 212, 320, 89]
    };
    if (data != null) {
      newData = data;
    }

    let xAxisData = newData.cityList;
    let data1 = newData.hasLive;
    let data2 = newData.emptyLive;
    let data3 = newData.waitLive;
    
    option = {
      color: ['#87CEFA', '#FF8C00', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
      legend: {
        data: ['已入住床位', '空床位数'],
        top: '0%',
        show: false,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        // show: false,
      },
      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: {
        data: xAxisData,
        name: 'X Axis',
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      },
      series: [{
          name: '已入住床位',
          type: 'bar',
          stack: 'one',
          // emphasis: emphasisStyle,
          data: data1,
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: 'rgb(86, 156, 213)',
              opacity: 1,
              barBorderRadius: 2,
            }
          }
        },
        {
          name: '空床位数',
          nameTextStyle: {
            padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离
          },
          type: 'bar',
          stack: 'one',
          // emphasis: emphasisStyle,
          data: data2,
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: 'rbg(239, 121, 53)',
              opacity: 1,
              barBorderRadius: 2,
            }
          }
        },
        {
          name: '轮候人数',
          nameTextStyle: {
            padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离
          },
          type: 'bar',
          stack: 'one',
          // emphasis: emphasisStyle,
          data: data3,
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
               //color: 'rbg(239, 121, 240)',
              opacity: 1,
              barBorderRadius: 2,
            }
          }
        },
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function newecharts_2(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart2'));
    // var emphasisStyle = {
    //     itemStyle: {
    //         shadowBlur: 10,
    //         shadowColor: 'rgba(0,0,0,0.3)'
    //     }
    // };
    let newData = [
      ['广州', '长沙', '怀化', '惠州', '海口'],
      [5, 0, 2, 1, 1],
      [0, 2, 1, 0, 0]
    ];
    // console.log(data);
    if (data != null) {
      // console.log('echarts_2');
      newData = data;
    }
    let xAxisData = newData[0];
    let data1 = newData[1];
    let data2 = newData[2];
    // let xAxisData = ['广州', '长沙', '怀化', '惠州', '海口'];
    // let data1 = [13646, 12834, 9654, 6120, 3586];
    // let data2 = [695, 520, 212, 320, 89];
    option = {
      // color: ['#27d08a', '#FF8C00', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
      //color: ['#FF0000', '#DC143C', 'FFD700', '#FF6347'],
      color: ['#FF0000', '#FFFF00','#DC143C'],
      legend: {
        data: ['5日内未出门人数', '14日内未回家人数'],
        top: '0%',
        show: false,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        // show: false,
      },
      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: {
        data: xAxisData,
        name: 'X Axis',
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      },
      series: [{
          name: '5日内未出门人数',
          type: 'bar',
          stack: 'one',
          // emphasis: emphasisStyle,
          data: data1,
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: 'rgb(86, 156, 213)',
              opacity: 1,
              barBorderRadius: 2,
            }
          }
        },
        {
          name: '14日内未回家人数',
          nameTextStyle: {
            padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离
          },
          type: 'bar',
          stack: 'one',
          // emphasis: emphasisStyle,
          data: data2,
          barWidth: '35%', //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: 'rbg(239, 121, 53)',
              opacity: 1,
              barBorderRadius: 2,
            }
          }
        },
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_5(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart5'));
    let newData = [
      ['热水量', '冷水量', '电量'],
      [5, 3, 2, 2],
      [2.8, 1.8, 4.4, 2.4],
      [4.5, 3.5, 2.5, 4.3]
    ];
    // console.log(data);
    if (data != null) {
      // console.log('echarts_5');
      newData = data;
    }
    let name = newData[0];
    let data1 = newData[1];
    let data2 = newData[2];
    let data3 = newData[3];
    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },

      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
          },
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1	)",
            width: 1,
            type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          }
        }
      }],
      series: [{
          name: name[0],
          type: 'bar',
          data: data1,
          barWidth: '15%', //柱子宽度
          barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        },
        {
          name: name[1],
          type: 'bar',
          data: data2,
          barWidth: '15%', //柱子宽度
          barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        },
        {
          name: name[2],
          type: 'bar',
          data: data3,
          barWidth: '15%', //柱子宽度
          barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              // color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        },
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_4(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart4'));
    let newData = [
      ['广州', '长沙', '怀化', '惠州', '海口'],
      [302.17, 108.33, 66.25, 96.97, 44.50],
      [403.35, 100.30, 96.88, 97.72, 97.07]
    ];
    // console.log(data);
    if (data != null) {
      // console.log('echarts_4');
      newData = data;
    }
    let xAxisData = newData[0];
    let data1 = newData[1];
    let data2 = newData[2];
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#dddc6b'
          }
        },
        formatter: function (params) {
          var relVal = params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
          }
          return relVal;
        }
      },
      legend: {
        top: '0%',
        data: ['轮候人数/空床数', '总需求人数/总床位数'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      grid: {
        left: '10',
        top: '30',
        right: '10',
        bottom: '10',
        containLabel: true
      },

      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }

        },

        data: xAxisData,

      }, {

        axisPointer: {
          show: false
        },
        axisLine: {
          show: false
        },
        position: 'bottom',
        offset: 20,
      }],

      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12,
          },
        },

        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [{
          name: '轮候人数/空床数',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#0184d5',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1, 132, 213, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(1, 132, 213, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#0184d5',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: data1

        },
        {
          name: '总需求人数/总床位数',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#00d887',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 216, 135, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 216, 135, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#00d887',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: data2

        },

      ]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_6(data) {
    // 基于准备好的dom，初始化echarts实例
    let newData = [{
        value: 427,
        name: '公共支出'
      },
      {
        value: 525,
        name: '维修'
      },
      {
        value: 195,
        name: '管理'
      },
      {
        value: 351,
        name: '生活'
      },
    ];
    // console.log(data);
    if (data != null) {
      newData = data;
    }
    // console.log(newData);
    var myChart = echarts.init(document.getElementById('echart6'));
    option = {
      title: [{
        // text: '公共支出情况',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '12'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ",
        position: function (p) { //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {
        top: '80%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['公共支出', '维修', '管理', '生活'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [{
        name: '支出',
        type: 'pie',
        center: ['50%', '42%'],
        radius: ['0%', '65%'],
        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: newData
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_31(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb1'));
    let newData = [{
      value: 7250,
      name: '广州'
    },
    {
      value: 6942,
      name: '长沙'
    },
    {
      value: 5127,
      name: '怀化'
    },
    {
      value: 3481,
      name: '惠州'
    },
    {
      value: 1993,
      name: '海口'
    },
  ];
  // console.log(data);
  if (data != null) {
    // console.log('echarts_31');
    newData = data;
  }
    option = {

      title: [{
        text: '总房数(24793)',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '12'
        }
      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c}",
        position: function (p) { //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {

        top: '80%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['广州', '长沙'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        },
        // show: false
      },
      series: [{
        name: '房间数',
        type: 'pie',
        center: ['50%', '47%'],
        radius: ['40%', '65%'],
        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: newData,
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_32(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb2'));
    let newData = [{
      value: 6823,
      name: '广州'
    },
    {
      value: 6417,
      name: '长沙'
    },
    {
      value: 4827,
      name: '怀化'
    },
    {
      value: 3105,
      name: '惠州'
    },
    {
      value: 1793,
      name: '海口'
    },
  ]
  // console.log(data);
  if (data != null) {
    // console.log('echarts_32');
    newData = data;
  }
    option = {

      title: [{
        text: '已入住(22965)',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '12'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c}",
        position: function (p) { //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {

        top: '80%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['怀化', '惠州'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [{
        name: '已入住',
        type: 'pie',
        center: ['50%', '47%'],
        radius: ['40%', '65%'],
        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: newData
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_33(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb3'));
    let newData =[{
      value: 427,
      name: '广州'
    },
    {
      value: 525,
      name: '长沙'
    },
    {
      value: 195,
      name: '怀化'
    },
    {
      value: 351,
      name: '惠州'
    },
    {
      value: 200,
      name: '海口'
    },
  ]
  // console.log(data);
  if (data != null) {
    // console.log('echarts_33');
    newData = data;
  }
    option = {
      title: [{
        text: '可分配(1828)',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '12'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ",
        position: function (p) { //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {
        top: '80%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['海口'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12',
        }
      },
      series: [{
        name: '可分配',
        type: 'pie',
        center: ['50%', '47%'],
        radius: ['40%', '65%'],
        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: newData
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

})
